<template>
  <div class="pics">
    <h2>我的相册</h2>
    <ul>
      <li
        v-for="item in imageList"
        :key="item.id"
      >
        <a
          href="javascript:void(0);"
          @click="clickFn(item)"
        >
          <img
            :src="item.imgs"
            alt=""
          />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import { getArticleList } from '../api/article'
export default {
  data() {
    return {
      arr1: [1, 2, 3, 4, 5, 6, 7],
      imageList: [],
      baseURL: this.baseURL
    }
  },
  async created() {
    const opt = {
      page: 1,
      per_page: 100,
      channel_id: 4
    }
    await getArticleList(opt).then(res => {
      this.imageList = res.data.data
      this.imageList.forEach((item, index) => {
        const imgReg = /<img.*?(?:>|\/>)/gi
        const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
        const str = item.content
        const arr = str.match(imgReg)
        const srcArr = []
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            const src = arr[i].match(srcReg)
            // 获取图片地址
            srcArr.push(src[1])
          }
        }
        this.imageList[index].imgs = srcArr[0]
        if (!this.imageList[index].imgs && !this.imageList[index].image) {
          this.imageList[index].imgs = require('../assets/static.png')
        } else if (!this.imageList[index].imgs) {
          this.imageList[index].imgs = `${this.baseURL}/uploads/${
            this.imageList[index].image.split(',')[0]
          }`
        }
      })
    })
  },
  methods: {
    clickFn(v) {
      this.$router.push({
        path: '/wodexiangce',
        query: {
          id: v.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pics {
  border-radius: 8px;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  overflow: hidden;
  background: #fff;
  margin-bottom: 20px;
  h2 {
    padding: 20px;
    font-size: 18px;
  }
  ul {
    overflow: hidden;
    margin: 0 20px 20px;
    li {
      width: 33.333%;
      float: left;
      a {
        display: block;
        height: 60px;
        margin: 2px;
        overflow: hidden;
        background: #000;
        img {
          width: 100%;
          height: 60px;
          opacity: 0.8;
          transition: all 0.3s;
          object-fit: cover;
        }
      }
      img:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>
